{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/register.css'%}" />
</head>
<body>
    <form class="register-form" action="/register/" method="post">
        <div class="form-group">
            <label>账号名</label>
            <input name="username" type="text" placeholder="账户唯一识别，可用来登录">
        </div>

        <div class="form-group">
            <label>设置密码</label>
            <input name="password" type="password" placeholder="建议使用两种或两种以上字符组合">
        </div>

        <div class="form-group">
            <label>确认密码</label>
            <input name="c_password" type="password" placeholder="请再次输入密码">
        </div>

        <div class="form-group">
            <label>邮箱验证</label>
            <input name="email" type="email" placeholder="请输入邮箱">
        </div>

        <div class="form-group">
            <label>邮箱验证码</label>
            <div class="verify-group">
                <input name="email_code" type="text" placeholder="请输入邮箱验证码">
                <button type="button" class="verify-button">获取验证码</button>
            </div>
        </div>

        <button type="submit" class="submit-button">立即注册</button>
    </form>

    <script>
        $(document).ready(function(){
            $('.verify-button').click(function(){
                var email = $('input[type="email"]').val();
                if(email === ''){
                    alert('请输入邮箱地址');
                    return;
                }

                // 发送验证码请求到服务器
                $.ajax({
                    url: '/send_verification_code',
                    method: 'POST',
                    data: { email: email },
                    success: function(response){
                        if(response.success){
                            alert('验证码已发送');
                            startCountdown();
                        } else {
                            alert('发送失败，请重试');
                        }
                    },
                    error: function(){
                        alert('网络错误，请稍后重试');
                    }
                });
            });

            function startCountdown(){
                var button = $('.verify-button');
                var originalText = button.text();
                var time = 60;
                button.prop('disabled', true);
                button.text(time + '秒');

                var countdown = setInterval(function(){
                    time--;
                    button.text(time + '秒');
                    if(time <= 0){
                        clearInterval(countdown);
                        button.text(originalText);
                        button.prop('disabled', false);
                    }
                }, 1000);
            }
        });
    </script>
</body>
</html>